<template>
  <div>
    <el-form>
      <el-select
        class="elinput"
        v-model="nname"
        placeholder="根据难度查询题目列表"
        :loading="loading"
        @change="seleLists(`/question/qdetails/gett/?nid=${nname}`)"
        clearable
      >
        <el-option
          v-for="(v, i) in seleList"
          :key="i"
          :label="v.nname"
          :value="v.nid"
        ></el-option>
      </el-select>
      <el-select
        class="elinput"
        v-model="tname"
        placeholder="根据题型查询题目列表"
        :loading="loading"
        @change="seleLists(`/question/qdetails/gett/?tid=${tname}`)"
        clearable
      >
        <el-option
          v-for="(v, i) in seleList1"
          :key="i"
          :label="v.tname"
          :value="v.tid"
        ></el-option>
      </el-select>
      <el-select
        class="elinput"
        v-model="sname"
        placeholder="查询同一课程的题目列表"
        :loading="loading"
        @change="seleLists(`/question/qdetails/gett/?sid=${sname}`)"
        clearable
      >
        <el-option
          v-for="(v, i) in seleList2.list"
          :key="i"
          :label="v.sname"
          :value="v.sid"
        ></el-option>
      </el-select>
      <el-input
        class="elinput"
        placeholder="根据关键字查询题目列表"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button class="elbut" type="primary" icon="el-icon-search" @click="but"
        >搜索</el-button
      >
      <!-- 添加框 -->
      <Create />
      <!-- 上传表格批量上传 -->
      <el-button class="elbut" type="primary"  @click="dialogVisible = true">点击上传</el-button>
      <el-dialog
        title="上传文件"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div style="width=100%;height:120px;">
          <el-upload
            class="elinput"
            action="http://192.168.0.119:9090/question/excel/addques"
            :headers="token"
            :on-success="handlePreview"
            :show-file-list='false'>
            <el-button type="primary">上传选择</el-button>
          </el-upload>
          <!-- <el-upload
            class="elinput"
            action="http://192.168.0.119:9090/question/excel/addques"
            :headers="token"
            :on-success="handlePreview"
            :show-file-list='false'>
            <el-button type="primary">上传多选</el-button>
          </el-upload> -->
          <el-upload
            class="elinput"
            action="http://192.168.0.119:9090/question/excel/addquesTK"
            :headers="token"
            :on-success="handlePreview"
            :show-file-list='false'>
            <el-button type="primary">上传填空</el-button>
          </el-upload>
          <el-upload
            class="elinput"
            action="http://192.168.0.119:9090/question/excel/addquesPD"
            :headers="token"
            :on-success="handlePreview"
            :show-file-list='false'>
            <el-button type="primary">上传判断</el-button>
          </el-upload>
          <el-upload
            class="elinput"
            action="http://192.168.0.119:9090/question/excel/addquesJD"
            :headers="token"
            :on-success="handlePreview"
            :show-file-list='false'>
            <el-button type="primary">上传简答</el-button>
          </el-upload>          
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 下载模板 -->
      <el-button class="elbut" type="primary" @click="dialogVisibles = true">下载模板</el-button>
      <!-- 下载弹框 -->
      <el-dialog
        title="下载模板"
        :visible.sync="dialogVisibles"
        width="30%"
        :before-close="handleClose">
        <div style="width=100%;height:120px;">
          <el-button class="dialoginput" type="primary" plain @click="xia(1)">下载选择</el-button>
          <el-button class="dialoginput" type="primary" plain @click="xia(4)">下载简答</el-button>
          <el-button class="dialoginput" type="primary" plain @click="xia(3)">下载判断</el-button>
          <el-button class="dialoginput" type="primary" plain @click="xia(2)">下载填空</el-button>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibles = false">取 消</el-button>
        </span>
      </el-dialog>
    </el-form>
  </div>
</template>
<script>
import Create from "./create.vue";
export default {
  components: { Create },
  data() {
    return {
      //下拉框数据
      input: "",
      dialogVisible:false,
      dialogVisibles:false,
      token:{token:localStorage.getItem('token')},
      nname: "",
      tname: "",
      sname: "",
      //下拉框加载
      loading: false,
      //下拉框数据
      seleList: [],
      seleList1: [],
      seleList2: [],
    };
  },
  created() {
    this.but();
  },
  methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
      },
    // 上传文件 批量上传
    xia(val){
      this.axios({
        url:`http://192.168.0.119:9090/question/excel/download?i=${val}`,
        responseType: 'blob',
        method: 'GET',
      }).then(res=>{
        const blobUrl = window.URL.createObjectURL(res.data);
        // const title = '下载文件的标题.pdf';
        const a = document.createElement('a');
        a.style.display = 'none';
        // a.download = title;
        a.href = blobUrl;
        a.click();
        document.body.removeChild(a);
        // this.but();
      })
    },
    handlePreview(file){
      console.log(file)
      if(file.code === 20000){
        alert(file.msg)
        this.but();
      }else if(file.code === 500){
        alert(file.msg)
      }else if(file.code === "20001"){
        alert(file.msg)
      }else{
        alert(file.msg)
      }
    },
    but() {
      this.$emit("vLoadings", true);
      this.axios
        .get(
          `/question/qdetails/gett/?sid=${this.sname}&nid=${this.nname}&tid=${this.tname}&key=${this.input}`
        )
        .then((res) => {
          this.$emit("vLoadings", false);
          this.$emit("tableDatas", res.data.result);
          if (res.data.code != 20000) {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    seleLists(val) {
      this.$emit("vLoadings", true);
      this.axios
        .get(val)
        .then((res) => {
          this.$emit("vLoadings", false);
          console.log(this.seleList);
          console.log(res.data);
          this.$emit("tableDatas", res.data.result);
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
      console.log(this.seleList);
    },
    sele() {
      // this.loading = true;
      this.axios
        .get("/question/nd/list")
        .then((res) => {
          this.seleList = res.data.list;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
      this.axios
        .get("/question/type/list")
        .then((res) => {
          this.seleList1 = res.data.list;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
      this.axios
        .get("/question/subject/list")
        .then((res) => {
          this.seleList2 = res.data.list;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
  },
  mounted() {
    this.sele();
  },
};
</script>

<style scoped>
.elbut {
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.elinput {
  float: left;
  width: 150px;
  margin-right: 20px;
  margin-top: 20px;
}
.dialoginput{
  /* float: left; */
  /* width: 150px; */
  margin-right: 20px;
  margin-top: 20px;
}
</style>